<template>
    <div style="display:flex;flex-direction:column;align-items:center ">
      <div style="display:flex;justify-content: center;position: relative;">

<div style="position: absolute;top:-120px;width:1200px">
<div style="height:60px;background-color:#fff;width:120px;display:flex;justify-content:center;align-items:center;border-radius:6px;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#6593f3;font-weight:bold">
  铁路整柜
</div>
<div style="height:120px;width:100%;background-color:#fff;border-radius: 6px;padding:30px;box-shadow: 0 3px 4px rgba(0, 21, 41, 0.08);border-top-left-radius:0;;display:flex">
  <div style="">
    <div>
      起始地
    </div>
    <div>
      <el-select v-model="value1" placeholder="选择起始地" style="width: 120px" class="no-border">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
  <div style="height:100%;width:1px;background-color:#ccc;margin:0 120px"></div>
  <div style="">
    <div>
      目的地
    </div>
    <div>
      <el-select v-model="value2" placeholder="选择目的地" style="width: 120px" class="no-border">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
  <div style="height:100%;width:1px;background-color:#ccc;margin:0 120px"></div>
  <div>
    <div>
      出运日期
    </div>
    <div style="width: 100px;" class="no-border1">
      <el-date-picker
        v-model="value"
        type="date"
        placeholder="选择日期"
      />
    </div>
  </div>
  <div style="flex:1;display:flex;justify-content:space-between">
    <div></div>
    <el-button type="primary" style="height:100%;width:180px;font-size:16px" @click="toSearch">搜索</el-button>
  </div>
</div>
</div>
</div>

      <div style="margin-top:150px;width:1200px">
        <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;">
          <span style="text-align: center;font-weight: bold;color:#363636">产品与服务</span>
          <span style="font-size:16px;color:#c8c8c8">Products & Services</span>
        </div>

        <div style="margin-top:50px;display:flex;justify-content:space-between">

          <div class="cardhover" @click="toProducts(0)">
            <div class="product" :style="{'backgroundImage':'url('+baseURL_dev+productList[0].productImageUrl+')'}"></div>
            <div style="padding:20px">
              <div style="font-weight:bold;font-size:15px">{{productList[0].productName}}</div>
              <div class="cardtext">{{productList[0].productTitle}}</div>
              <div style="display:flex;justify-content:space-between">
                <div></div>
                <div><el-button class="cardbtn">查看更多</el-button></div>
              </div>
            </div>
          </div>

          <div class="cardhover">
            <div v-if="productList[1]" @click="toProducts(1)">
              <div class="product" :style="{'backgroundImage':'url('+baseURL_dev+productList[1].productImageUrl+')'}"></div>
              <div style="padding:20px">
                <div style="font-weight:bold;font-size:15px">{{productList[1].productName}}</div>
                <div class="cardtext">{{productList[1].productTitle}}</div>
                <div style="display:flex;justify-content:space-between">
                  <div></div>
                  <div><el-button class="cardbtn">查看更多</el-button></div>
                </div>
              </div>
            </div>
          </div>

          <div class="cardhover" @click="toProducts(2)">
            <div v-if="productList[2]">
              <div class="product" :style="{'backgroundImage':'url('+baseURL_dev+productList[2].productImageUrl+')'}"></div>
              <div style="padding:20px">
                <div style="font-weight:bold;font-size:15px">{{productList[2].productName}}</div>
                <div class="cardtext">{{productList[2].productTitle}}</div>
                <div style="display:flex;justify-content:space-between">
                  <div></div>
                  <div><el-button class="cardbtn">查看更多</el-button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display:flex;justify-content:center;align-items:center;height:100px">
          <el-link type="primary"  @click="toMyService">查看更多</el-link>
        </div>
      </div>
      
      <div style="width:100%;background-color:#e6ecf3;padding:50px;display:flex;justify-content:center">
        <div style="width:1200px">
          <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;">
            <span style="text-align: center;font-weight: bold;color:#363636">客户案例</span>
            <span style="font-size:16px;color:#c8c8c8">Customer stories</span>
          </div>
          <div style="height:500px;display: flex;justify-content: space-between;margin-top: 20px;">
            <div style="width: 60%">
              <div style="height: 240px;display: flex;justify-content: space-between;">
                <div style="width: 48%;height: 100%;cursor: pointer;" >
                  <div v-if="caseList[0]" class="case1" :style="{'backgroundImage':'url('+baseURL_dev+caseList[0].caseImageUrl+')'}" @click="toCaseDetail(caseList[0])">
                    <div style="font-size: 14px;">
                      {{ caseList[0].caseTitle }}
                    </div>
                    <div style="font-weight: bold;">
                      {{ caseList[0].caseName }}
                    </div>
                  </div>
                </div>
                <div style="width: 48%;height: 100%;cursor: pointer;">
                  <div v-if="caseList[1]" class="case1" :style="{'backgroundImage':'url('+baseURL_dev+caseList[1].caseImageUrl+')'}" @click="toCaseDetail(caseList[1])">
                    <div style="font-size: 14px;">
                      {{ caseList[1].caseTitle }}
                    </div>
                    <div style="font-weight: bold;">
                      {{ caseList[1].caseName }}
                    </div>
                  </div>
                </div>
                
              </div>
              <div style="height: 240px;cursor: pointer;">
                <div v-if="caseList[2]" class="case2" :style="{'backgroundImage':'url('+baseURL_dev+caseList[2].caseImageUrl+')'}" @click="toCaseDetail(caseList[2])">
                    <div style="font-size: 14px;">
                      {{ caseList[2].caseTitle }}
                    </div>
                    <div style="font-weight: bold;">
                      {{ caseList[2].caseName }}
                    </div>
                  </div>
              </div>
              
            </div>
            <div style="width: 38%;height: 100%;cursor: pointer;">
              <div v-if="caseList[3]" class="case3" :style="{'backgroundImage':'url('+baseURL_dev+caseList[3].caseImageUrl+')'}" @click="toCaseDetail(caseList[3])">
                <div style="font-size: 14px;">
                  {{ caseList[3].caseTitle }}
                </div>
                <div style="font-weight: bold;">
                  {{ caseList[3].caseName }}
                </div>
              </div>
            </div>
            
          </div>
          <div style="display:flex;justify-content:center;margin-top: 30px;">
            <el-link type="primary" @click="toCase">查看更多</el-link>
          </div>
        </div>
      </div>

      <div style="height: 550px;width:1200px;padding: 50px 0;">
        <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;">
          <span style="text-align: center;font-weight: bold;color:#363636">新闻动态</span>
          <span style="font-size:16px;color:#c8c8c8">News & Updates</span>
        </div>
        <div style="display: flex;justify-content: space-between;margin-top: 50px;">
          <div class="newsImg" :style="{'backgroundImage':'url('+baseURL_dev+newsList[0].newsImageUrl+')'}">

          </div>
          <div style="height: 270px;width: 60%;">
            <div style="border-bottom: 1px solid #b5b5b5;height: 90px;display: flex;justify-content: space-between;align-items: center;" v-for="(item,index) in newsList">
              <div>
                <div style="font-weight: bold;font-size: 16px;">
                  {{ item.newsTitle }}
                </div>
                <div style="color: #b5b5b5;margin-top: 5px;font-size: 15px;">
                  {{ item.newsTitleVice }}
                </div>
              </div>
              <div style="color: #b5b5b5;font-size: 14px;">
                {{item.createTime}}
              </div>
            </div>
          </div>
        </div>
        <div style="display:flex;justify-content:center;margin-top: 50px;">
            <el-link type="primary" @click="toNews">查看更多</el-link>
          </div>
      </div>

      <!-- <div style="height: 500px;width: 100%;padding: 50px 0;display: flex;justify-content: center;background-color: #f1f1f1;">
        <div style="width: 1200px;">
          <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;">
            <span style="text-align: center;font-weight: bold;color:#363636">客户评价</span>
            <span style="font-size:16px;color:#c8c8c8">Rave reviews</span>
          </div>
          <div style="margin-top: 50px;display: flex;justify-content: space-between;">

            <div style="width: 32%;height: 260px;box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);background-color: #fff;position: relative;padding: 20px;" v-for="(item,index) in evaluateList" >
              <div style="position: absolute;top: -20px; ">
                <el-avatar :size="60" :src="baseURL_dev+item.userAvatarUrl" />
              </div>
              <div style="margin-left: 80px;font-size: 14px;">
                <span>{{ item.userName }}</span>
                <span style="margin-left: 15px;">{{ item.userJob }}</span>
              </div>
              <div style="font-weight: bold;font-size: 15px;margin: 15px 0;">购买产品：{{ item.productName }}</div>
              <div style="font-size: 14px;color: #b5b5b5;height: 100px;border-bottom: 1px solid #f6f6f6;">
                <div v-html="item.userEvaluate"></div>
              </div>
              <div style="font-size: 14px;color: #b5b5b5;padding: 20px 0;display: flex;justify-content: space-between;align-items: center;">
                <span>星级评价：</span>
                <el-rate v-model="item.evaluateLevel" disabled />
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
      <!-- <el-container>
        <el-header>
          <div style="background-color:#67C23A">
            Header
          </div>
        </el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container> -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted,ref,watch } from 'vue'
  import { useRouter, useRoute } from "vue-router";
  import { $ProductList,$CaseList,$NewsList,$EvaluateList,$ServiceList } from '../api/api'
  import Foot from './foot.vue'
  import { baseURL_dev } from '../config/baseUrl'

  const router = useRouter();

  onMounted(()=>{
    loadProductList()
    loadCaseList()
    loadNewsList()
    loadEvaluateList()
  })

  let searchForm = ref({})

  const value = ref('')
const value1 = ref('')
const value2 = ref('')

const options = [
  {
    value: '1',
    label: '起始地1',
  }
]

const options2 = [
  {
    value: '1',
    label: '目的地1',
  }
]

  const toSearch = async ()=>{
    router.push('/search')
    // console.log(searchType.value)
    // if(searchType.value==1){
    //   searchForm.value.productName = searchForm.value.input
    //   let ret = await $ProductList(searchForm.value)
    //   console.log(ret)
    //   let List = ret.rows
    //   console.log('search',List)
    //   router.push('/search?list='+JSON.stringify(List)+'&type='+1)
    // }else{
    //   searchForm.value.caseName = searchForm.value.input
    //   let ret = await $CaseList(searchForm.value)
    //   console.log(ret)
    //   let List = ret.rows
    //   console.log('search',List)
    //   router.push('/search?list='+JSON.stringify(List)+'&type='+2)
    // }
  }

  const toCaseDetail = async(item) => {
    router.push('/caseDetail?item='+JSON.stringify(item))
  }

  const toNews = async ()=>{
    router.push('/news')
  }

  const toCase = async ()=>{
    router.push('/case')
  }

  const toProducts = async (i)=>{
    console.log(i)
    router.push('/myProduct')
  }

  const toMyService = async ()=>{
    console.log(111)
    router.push('/myProduct')
  }

  let searchType = ref(1)

  let productList = ref([{},{},{}])
  let caseList = ref([{},{},{},{},{}])
  let newsList = ref([{}])
  let evaluateList = ref([{}])

  const loadProductList = async ()=>{
    let ret = await $ProductList()
    console.log(ret)
    productList.value = ret.rows
    console.log('productList',productList.value)
  }
  const loadCaseList = async ()=>{
    let ret = await $CaseList()
    console.log(ret)
    caseList.value = ret.rows
    console.log('caseList',caseList.value)
  }
  const loadNewsList = async ()=>{
    let ret = await $NewsList()
    console.log(ret)
    newsList.value = ret.rows
    console.log('newsList',newsList.value)
    if(newsList.value.length>3){
      newsList.value.length = 3
    }
  }
  const loadEvaluateList = async ()=>{
    let ret = await $EvaluateList()
    console.log(ret)
    evaluateList.value = ret.rows
    console.log('evaluateList',evaluateList.value)
    if(evaluateList.value.length>3){
      evaluateList.value.length = 3
    }
  }
    // const value1 = ref(5)
    // const input = ref('')
  </script>
  
  <style scoped lang="less">
  .newsImg{
    height: 270px;
    width: 38%;
    background-image: url(../../img/News1.png);
    background-size: 100% 100%;
  }
  .ss_act{
    
    height:60px;
    background-color:#fff;
    width:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:6px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    color:#6593f3;
    font-weight:bold;
    cursor: pointer
  }
  .act{
    background-color: rgba(255, 255, 255, 0.75);
    height:60px;
    width:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:6px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    font-weight:bold;cursor: pointer
  }
  .case1{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 15px;
    display: flex;
    flex-direction: column-reverse;
    color: #fff;
  }
  .case2{
    height: 100%;
    background-size: 100% 100%;
    margin-top: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column-reverse;
    color: #fff;
  }
  .case3{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 15px;
    display: flex;
    flex-direction: column-reverse;
    color: #fff;
  }
  .product{
    background-size: 100% 100%;
    height:200px;
    border-top-left-radius:10px;
    border-top-right-radius:10px
  }
  .inputDeep {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
  }

  .cardhover{
    width:30%;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    border-radius:10px;
    cursor: pointer;
  }
  .cardhover:hover{
    background-color: #1c65fe;
    color: #fff;
    .cardtext{
      color: #fff;
    }
    .cardbtn{
      color: #3570ff;
    }
  }
  .cardtext{
    color:#cecece;
    margin-top:20px;
    font-size:12px
  }
  .cardbtn{
    height:35px;
  }

  .no-border1{
  :deep .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
 
  :deep .el-input__suffix {
    box-shadow:none !important;
    display: none !important;
  }
  :deep .el-input__wrapper.is-focus {
    box-shadow: none !important;
    border: none !important;
    outline: 0 !important;
  }
}
.no-border{
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
}
  </style>